<template>
  <div class="guihua-add">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目申报</el-breadcrumb-item>
      <el-breadcrumb-item>年度计划申报</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="addContainer">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="addForm">
        <h3 class="title">
          <i></i>
          年度计划{{id?'编辑':'新增'}}
        </h3>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年度计划名称" prop="planName">
              <el-input placeholder="请输入年度计划名称" v-model="ruleForm.planName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年度计划编号" prop="planNo">
              <el-input placeholder="请输入年度计划编号" v-model="ruleForm.planNo"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="上报时间：" prop="compileTime">
              <el-date-picker
                v-model="ruleForm.compileTime"
                align="right"
                type="date"
                placeholder="请选择编制时间"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="年度计划描述" prop="remark">
              <el-input :rows="3" type="textarea" placeholder="请输入内容" v-model="ruleForm.remark"></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="24" class="compileAttachmentFileList">
                        <el-form-item label="上传规划" prop="name">
                            <el-upload
								:before-remove="compileRemoveFile"
                                :data="{fileType: 18}"
                                name="multipartFiles"
                                class="upload-demo"
                                :action="$config.API_URL + '/file/upload'"
                                :on-change="compileHandleChange"
                                :file-list="compileAttachmentFileList"
								:limit="1"
                            >
                                <el-button size="small" icon="el-icon-upload">选择上传文件</el-button>
                                <div
                                    slot="tip"
                                    class="el-upload__tip"
                                >只能上传jpg/png/word/pdf/zip/excle/ppt格式文件，文件不能超过50MB</div>
                            </el-upload>
                        </el-form-item>
          </el-col>-->
        </el-row>
        <el-dialog
          title="选择项目"
          :visible.sync="dialogVisible"
          width="66%"
          :before-close="handleClose"
        >
          <el-input v-model="input" class="w-200" placeholder="请输入项目/规划的关键字/编号"></el-input>

          <el-select class="w-200" v-model="selectValue" placeholder="选择上报单位">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
          <el-select class="w-200" v-model="selectValue" placeholder="选择项目状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
          <el-select class="w-200" v-model="selectValue" placeholder="选择项目概算范围">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
          <el-button type="primary" @click="search">查询</el-button>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
            <el-table-column label="项目名称" width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="项目编号" width="120"></el-table-column>
            <el-table-column prop="address" label="项目概算" show-overflow-tooltip></el-table-column>
            <el-table-column prop="address" label="可研/初设及概算评审状态" show-overflow-tooltip></el-table-column>
            <el-table-column prop="address" label="项目性质" show-overflow-tooltip></el-table-column>
            <el-table-column prop="address" label="报送单位" show-overflow-tooltip></el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <h3 class="title">
          <i></i>
          年度计划项目
          <el-button plain @click="add">去添加</el-button>
        </h3>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
         <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
</el-table-column>

          <el-table-column label="项目名称" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="项目编号" width="120"></el-table-column>
          <el-table-column prop="address" label="项目概算" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="项目编号" width="120"></el-table-column>
          <el-table-column prop="address" label="项目概算" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="可研/初设及概算评审状态" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="项目性质" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="报送单位" show-overflow-tooltip></el-table-column>
        </el-table>

        <h3 class="title">
          <i></i>

          储备目录附件
        </h3>
        <span>储备目录描述：</span>
        <el-input v-model="largeInput" placeholder></el-input>
        <h3 class="title">
          <i></i>
          储备目录:
          <el-button plain @click="add">去添加</el-button>
        </h3>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
         <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
</el-table-column>
          <el-table-column label="项目名称" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="项目编号" width="120"></el-table-column>
          <el-table-column prop="address" label="项目概算" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="项目编号" width="120"></el-table-column>
          <el-table-column prop="address" label="项目概算" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="可研/初设及概算评审状态" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="项目性质" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="报送单位" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-form>
    </div>
    <div class="operateBtn">
      <el-button plain @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm', 2)">提交</el-button>
      <el-button plain @click="submitForm('ruleForm', 1)">保存</el-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      largeInput: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶",
          disabled: true
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      selectValue: "",
      dialogVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          }
        ]
      },
      compileUnit: [
        { vlaue: 1, label: "长沙市公安局" },
        { vlaue: 2, label: "长沙市税务局" },
        { vlaue: 3, label: "长沙市财政局" }
      ],
      ruleForm: {
        planName: "",
        planNo: "",
        planBeginTime: "",
        planEndTime: "",
        compileUnitId: null,
        compileUnit: "",
        compilePerson: "",
        compileTime: "",
        compileAttachmentId: "",
        compileFileType: null,
        remark: "",
        auditPerson: "",
        auditTime: "",
        auditResult: null,
        auditAttachmentId: "",
        auditFileType: null,
        auditOpinion: "",
        approvalPerson: "",
        approvalTime: "",
        isApproval: null,
        approvalOpinion: "",
        isDelete: 1
      },
      id: null,
      rules: {
        planName: [
          {
            required: true,
            message: "请输入规划名称",
            trigger: "blur"
          }
        ],
        planNo: [
          {
            required: true,
            message: "请输入规划编号",
            trigger: "blur"
          }
        ],
        planBeginTime: [
          {
            required: true,
            message: "开始年份",
            trigger: "change"
          }
        ],
        planEndTime: [
          {
            required: true,
            message: "截止年份",
            trigger: "change"
          }
        ],
        auditPerson: [
          {
            required: true,
            message: "请输入审定人",
            trigger: "blur"
          }
        ],
        auditTime: [
          {
            required: true,
            message: "请选择审定时间",
            trigger: "change"
          }
        ],
        auditResult: [
          {
            required: true,
            message: "请选择审定结果",
            trigger: "change"
          }
        ],
        approvalPerson: [
          {
            required: true,
            message: "请输入批准人",
            trigger: "blur"
          }
        ],
        approvalTime: [
          {
            required: true,
            message: "请选择批准时间",
            trigger: "change"
          }
        ],
        isApproval: [
          {
            required: true,
            message: "请选择批准结果",
            trigger: "change"
          }
        ]
      },
      compileAttachmentFileList: [],
      auditAttachmentFileList: []
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    //   去添加
    add() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 获取详情
    getDetail() {
      this.axios
        .get("/cityPlan/getOne", { params: { id: this.id } })
        .then(res => {
          this.ruleForm = Object.assign(this.ruleForm, res.data);
        });
    },
    // 提交表单
    submitForm(formName, status) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ruleForm.currentState = status;
          this.ruleForm.planBeginTime =
            this.ruleForm.planBeginTime + "-01-01 00:00:00";
          this.ruleForm.planEndTime =
            this.ruleForm.planEndTime + "-01-01 00:00:00";
          this.ruleForm.compileTime = this.ruleForm.compileTime + " 00:00:00";
          this.ruleForm.auditTime = this.ruleForm.auditTime + " 00:00:00";
          this.ruleForm.approvalTime = this.ruleForm.approvalTime + " 00:00:00";
          this.axios.post("/cityPlan/insert", this.ruleForm).then(res => {
            this.$router.go(-1);
          });
        } else {
          this.$message.error("请填写带*的必填项！");
          return false;
        }
      });
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    compileHandleChange(file, fileList) {
      if (file.response) {
        this.ruleForm.compileAttachmentId = file.response.data.attachmentId;
        this.ruleForm.compileFileType = file.response.data.fileType;
      }
    },
    auditHandleChange(file, fileList) {
      if (file.response) {
        this.ruleForm.auditAttachmentId = file.response.data.attachmentId;
        this.ruleForm.auditFileType = file.response.data.fileType;
      }
    },
    compileRemoveFile(file) {
      this.ruleForm.compileAttachmentId = null;
    },
    auditRemoveFile(file) {
      this.ruleForm.auditAttachmentId = null;
    },
    compileUnitChange(val) {
      let obj = this.compileUnit.find(i => i.vlaue == val);
      if (obj) {
        this.ruleForm.compileUnit = obj.label;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.guihua-add {
  width: 1205px;
  .addContainer {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    .addForm {
      .el-row {
        border: 1px solid rgba(238, 238, 238, 1);
        border-bottom: none;
        .el-col {
          border-bottom: 1px solid rgba(238, 238, 238, 1);
        }
      }
      .el-select,
      .el-input {
        width: 100%;
      }
    }

    .addContainer .addForm .el-input[data-v-444d71bd] {
      width: 20%;
    }
    .title {
      font-size: 18px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      i {
        width: 4px;
        height: 16px;
        display: inline-block;
        background-color: #4967cf;
        margin-right: 6px;
      }
    }
  }
  .operateBtn {
    text-align: center;
    padding-top: 30px;
    .el-button--small {
      padding: 9px 30px;
    }
  }
  .fileList {
    .uploadBox {
      width: 114px;
      height: 58px;
      border-radius: 4px;
      border: 2px dashed rgba(160, 179, 244, 1);
      display: flex;
      flex-direction: column;
      .el-icon-plus {
        font-size: 26px;
        color: #4967cf;
      }
    }
    .upload-demo {
      padding: 11px 16px;
      width: 500px;
    }
  }
}
</style>
<style lang="less">
.addForm {
  .el-form-item {
    margin-bottom: 0;
  }
  .el-input {
    height: 40px;
    line-height: 40px;
  }
  .el-input__inner,
  .el-textarea__inner {
    border: none !important;
  }
  .el-form-item__label {
    background-color: #fafafa;
    min-height: 40px;
    line-height: 40px;
  }
  .el-form-item__error {
    display: none;
  }
  .w-200 {
    width: 200px;
  }
}
</style>
